
<!-- 
  App-1.vue
  路由模式
  编程式导航
-->
<template>
  <div>
    <h1>你好帅啊！</h1>
    <!-- 
      router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。 
      路由出口, 路由匹配到的组件将渲染在这里 -->
    -->
    <router-view></router-view>
    <div>
      <!-- 
        router-link
        请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。
        这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。
        我们将在后面看到如何从这些功能中获益。 
        a标签会自动刷新页面,这个不会
      -->
      <p>硬编码</p>
      <router-link to="/">Login</router-link>
      <router-link style="margin-left: 10px" to="/reg">Reg</router-link>

      <hr>
      <p>name指定名字</p>
      <!-- name指定名字,变为对象并且有对应name -->
      <router-link :to="{ name: 'Login' }">Login</router-link>
      <router-link style="margin-left: 10px" :to="{ name: 'Reg' }">Reg</router-link>

      <hr>
      <p>a标签</p>
      <!-- 
        使用a标签会闪一下
      -->
      <a href="/">Login</a>
      <a href="/reg">Reg</a>
      <hr>

      <p>编程式导航,直接用js来跳转</p>
      <p>1/2方式</p>
      <button @click="toPage('/')">Login</button>
      <button @click="toPage('/reg')">Reg</button>
      <p>命名式</p>
      <button @click="toPage('Login')">Login</button>
      <button @click="toPage('Reg')">Reg</button>

      <hr>
      <p>采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中其不会重复保存记录，而是替换原有的vue组件；</p>
      <router-link replace to="/">Login</router-link>
      <router-link replace style="margin-left:10px" to="/reg">Reg</router-link>

    </div>
    <hr>

  </div>
</template>

<script setup lang="ts">

import { useRouter } from 'vue-router'

const router = useRouter()

const toPage = (val: string) => {
  // 1. 直接传递
  // router.push(val)

  // 2. 对象
  // router.push({
  //   path: val
  // })

  // 3. 命名式,也是需要指定name
  // router.push({
  //   name: val
  // })

  // 4. replace编程式导航-replace
  router.replace(val)
}


</script>
<style scoped>

</style>
